<template>
  <div ref="container" class="diagram-container"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Graph } from '@antv/x6'

const container = ref<HTMLDivElement>()

onMounted(() => {
  const graph = new Graph({
    container: container.value!,
    width: 1600,
    height: 800,
    background: { color: '#000' },
    grid: false,
      interacting: {
    nodeMovable: false,
  },
  })

  // 母线，禁止拖动和选中
  graph.addNode({
    shape: 'rect',
    x: 200,
    y: 100,
    width: 300,
    height: 0.5,
    attrs: {
      body: {
        fill: '#ffa500',
        stroke: '#ffa500',
      },
    },
    movable: false,
    selectable: false,
  })

  // 电流值文字，禁止拖动和选中
  graph.addNode({
    shape: 'rect',
    x: 500,
    y: 90,
    width: 80,
    height: 20,
    attrs: {
      body: {
        fill: 'transparent',
        stroke: 'none',
      },
      label: {
        text: '94.40A',
        fill: '#00ff00',
        fontSize: 16,
      },
    },
    movable: false,
    selectable: false,
  })

  // 简单开关（红色圆形），禁止拖动和选中
  graph.addNode({
    shape: 'circle',
    x: 240,
    y: 90,
    width: 20,
    height: 20,
    attrs: {
      body: {
        fill: '#ff0000',
        stroke: '#cc0000',
        strokeWidth: 2,
      },
      label: {
        text: '开',
        fill: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        refX: 0.5,
        refY: 0.5,
        textAnchor: 'middle',
        textVerticalAnchor: 'middle',
      },
    },
    movable: false,
    selectable: false,
  })
})
</script>

<style scoped>
.diagram-container {
  width: 100%;
  height: 100vh;
}
</style>
